<template>
  <div class='comp-activities-wrapper window-wrapper'>
    <div class='container'>
      <div class='activity-wrapper'>
        <h3 v-if='$store.state.language === "zh-CN"'>
          <i class="el-icon-news"/> 研究成果
          <span class='read-more' @click='$router.push("/Achievement")'>更多</span>
        </h3>
        <h3 v-else>
          <i class="el-icon-news"/> Research results
          <span class='read-more' @click='$router.push("/Achievement")'>More</span>
        </h3>
        <div class='slide-container' v-if='$store.state.language === "zh-CN"'>
          <div class='slide-window' :style='slideWindoStyle'>
            <div class='slide-item activity-instance' v-for='(item,_) in activityList' :key='_'>
              <img :src="require(`../assets/re-result-${_ % (activityList.length / 2)}.jpg`)" />
              <div class='content'>{{item}}</div>
            </div>
          </div>
        </div>
        <div class='slide-container' v-else>
          <div class='slide-window' :style='enSlideWinowStyle'>
            <div class='slide-item activity-instance' v-for='(item, _) in enActivityList' :key='_'>
              <img :src="require(`../assets/re-result-${_ % (activityList.length / 2)}.jpg`)" />
              <div class='content'>{{item}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class='book-wrapper'>
        <h3 v-if='$store.state.language === "zh-CN"'>
          <i class="el-icon-collection"/> 出版著作
          <span class='read-more' @click='$router.push("/Book")'>更多</span>
        </h3>
        <h3 v-else>
          <i class="el-icon-collection"/> Publications
          <span class='read-more' @click='$router.push("/Book")'>More</span>
        </h3>
        <div class='book-container' v-if='$store.state.language == "zh-CN"'>
          <div class='book-instance' v-for='(item,_) in bookList' :key='item.id'>
            <div class='content' v-html="_ + 1 + '.' + item.content"></div>
          </div>
        </div>
        <div class='book-container' v-else>
          <div class='book-instance' v-for='item in enBookList' :key='item.id'>
            <div class='title'>{{item.title}}</div>
            <div class='content'>{{item.content}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Prop, Vue } from 'vue-property-decorator';
import { RequestStatus } from '../utils/constans';
import { formatBackTime } from '../utils/common';
import { iActivies, iBook } from '../typings/publication';
import $api from '../api';
import mockBook from '../mock/book';

@Component
export default class CompActivites extends Vue {
  private activityList: string[] = [];
  private enActivityList: string[] = [];
  private bookList: iBook[] = [];
  private enBookList: iBook[] = [];
  private slideWindoStyle: string = '';
  private enSlideWinowStyle: string = '';

  mounted() {
    // this.getActivityList();
    this.initActivityList();
    this.getBooksList();
  }

  initActivityList(){
    const activityList = [
      '四核物联网网关',
      '无线传感器网络ROESE算法',
      '物联网多种群协同进化ROCKS模型',
      '物联网数据收集EABS协议',
      '物联网通信节点',
      '智慧城市5G方案',
      '智慧物联网实验平台',
      '智能车联网动态传输策略',
    ];
    const enActivityList = [
      'Quad-core IoT Gateway',
      'Wireless sensor network ROESE algorithm',
      'IoT multi-group co-evolution ROCKS model',
      'IoT Data Collection EABS Protocol',
      'IoT Comm Node',
      'Smart City 5G Solution',
      'Smart IoT Experiment Platform',
      'Intelligent vehicle networking dynamic transmission strategy',
    ];

    this.activityList = activityList.concat(activityList);
    this.enActivityList = enActivityList.concat(enActivityList);
  }

  getBooksList() {
    const succ = (res: any) => {
      (res as any).map((record: iBook) => {
        if (record.language === '英语' && this.enBookList.length < 5) {
          this.enBookList.push(record);
        } else if (record.language !== '英语' && this.bookList.length < 5) {
          this.bookList.push(record);
        }
      });
    }
    if (this.$store.state.offModel) {
      succ(mockBook);
    } else {
      $api.publication.findAllBookClient().then(succ)
    }
  }
}
</script>

<style lang='scss' scoped>
.comp-activities-wrapper {
  padding: 0 30px;
  .container {
    width: 1200px;
    margin: auto;
    text-align: left;
  }
  .activity-wrapper,
  .book-wrapper {
    background: white;
    h3 {
      background: #113f6c;
      padding: 10px 20px;
      margin-top: 0px;
      color: white;
      .read-more {
        float: right;
        cursor: pointer;
        &:hover {
          color: #f5ae54;
        }
      }
    }
  }
  .activity-wrapper {
    padding-bottom: 10px;
    .activity-instance {
      background: white;
      text-align: center;
      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
      img {
        width: auto;
        height: 300px;
      }
      .content {
        padding: 10px 15px;
        white-space: nowrap;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .book-wrapper {
    margin-top: 15px;
    h3{
      background: #f5ae54;
      .read-more:hover{
        color: #113f6c;
      }
    }
    .book-instance {
      background: white;
      // color: #113f6c;
      padding: 10px 15px;
      border-bottom: 1px solid  #ededed;
      margin-bottom: 1px;
      // box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.05);
    }
  }
}
.slide-container {
  max-width: 100%;
  overflow: hidden;
}
.slide-window {
  white-space: nowrap;
  animation: move 60s linear infinite;
  // transform: translateX(-3450px);
  display: flex;
  flex-wrap: nowrap;
  .slide-item {
    width: auto;
    margin-right: 25px;
    display: inline-block;
    vertical-align: top;
    &:last-child {
      margin-right: 0;
    }
  }
  &:hover {
    animation-play-state: paused;
  }
  @keyframes move {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-3425px);
    }
  }
}
// @media screen and (max-width: 144px) {
//   @keyframes move {
//     0% {
//       transform: translateX(0);
//     }
//     100% {
//       transform: translateX(calc(980px - 100%));
//     }
//   }
// }
// @media screen and (max-width: 980px) {
//   @keyframes move {
//     0% {
//       transform: translateX(0);
//     }
//     100% {
//       transform: translateX(calc(100vw - 100%));
//     }
//   }
// }
// @media screen and (max-width: 700px) {
//   .comp-activities-wrapper {
//     padding: 30px 10px;
//   }
// }
</style>